<template>
  <div class="all">
    <div class="d2">
      <div class="dd1">
        灯杆编号:&nbsp;&nbsp;&nbsp;<el-input
          size="mini"
          v-model="query.lpName"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="dd2">
        区域:&nbsp;&nbsp;&nbsp;<el-select size="mini" v-model="query.areaId" placeholder="请选择">
          <el-option
            v-for="area in options"
            :key="area.areaId"
            :label="area.areaName"
            :value="area.areaId"
          >
          </el-option>
        </el-select>
      </div>
      <div class="dd3">
        <el-row>
          <el-button type="primary" round size="small" @click="loadMount()">查询</el-button>
          <el-button type="info" round size="small" @click="loadNew()">重置</el-button>
        </el-row>
      </div>
    </div>
    <div class = "show">
    <div>
      <span class="s1">红色显示异常，绿色显示在线，灰色显示关闭状态</span>
    </div>
    <div class="d1" v-for="(item, index) in items" :key="index">
      <el-card class="box-card">
        <el-row>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-link type="primary">编号：{{ item.lpName }}</el-link>
              <el-link type="primary">{{ item.areaName }}</el-link>
              <el-link icon="el-icon-map-location" type="success"
                >显示定位</el-link
              >
            </div></el-col
          >
          <el-col :span="16"
            ><div class="grid-content bg-purple-light">
              <!--if判断状态  正常绿色 异常红色 关闭灰色 -->
              <el-link
                icon="el-icon-sunny"
                type="success"
                v-if="item.state1 == 1"
                >照明设备</el-link
              >
              <el-link
                icon="el-icon-sunny"
                type="danger"
                v-if="item.state1 == 2"
                >照明设备</el-link
              >
              <el-link icon="el-icon-sunny" type="info" v-if="item.state1 == 3"
                >照明设备</el-link
              >
              <el-link
                icon="el-icon-video-camera-solid"
                type="success"
                v-if="item.state2 == 1"
                >视频设备</el-link
              >
              <el-link
                icon="el-icon-video-camera-solid"
                type="danger"
                v-if="item.state2 == 2"
                >视频设备</el-link
              >
              <el-link
                icon="el-icon-video-camera-solid"
                type="info"
                v-if="item.state2 == 3"
                >视频设备</el-link
              >
              <el-link
                icon="el-icon-microphone"
                type="success"
                v-if="item.state3 == 1"
                >广播设备</el-link
              >
              <el-link
                icon="el-icon-microphone"
                type="danger"
                v-if="item.state3 == 2"
                >广播设备</el-link
              >
              <el-link
                icon="el-icon-microphone"
                type="info"
                v-if="item.state3 == 3"
                >广播设备</el-link
              >
              <el-link
                icon="el-icon-share"
                type="success"
                v-if="item.state4 == 1"
                >无线设备</el-link
              >
              <el-link
                icon="el-icon-share"
                type="danger"
                v-if="item.state4 == 2"
                >无线设备</el-link
              >
              <el-link icon="el-icon-share" type="info" v-if="item.state4 == 3"
                >无线设备</el-link
              >
              <el-link
                icon="el-icon-s-platform"
                type="success"
                v-if="item.state5 == 1"
                >大屏设备</el-link
              >
              <el-link
                icon="el-icon-s-platform"
                type="danger"
                v-if="item.state5 == 2"
                >大屏设备</el-link
              >
              <el-link
                icon="el-icon-s-platform"
                type="info"
                v-if="item.state5 == 3"
                >大屏设备</el-link
              >
              <el-link
                icon="el-icon-plus"
                type="success"
                v-if="item.state6 == 1"
                >环境设备</el-link
              >
              <el-link icon="el-icon-plus" type="danger" v-if="item.state6 == 2"
                >环境设备</el-link
              >
              <el-link icon="el-icon-plus" type="info" v-if="item.state6 == 3"
                >环境设备</el-link
              >
            </div></el-col
          >
        </el-row>
      </el-card>
    </div>
  </div>
    <div class="block">
    <!-- <span class="demonstration">完整功能</span> -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      
      options: [],
      
      query: {
        currentPage: 1, //代表当前页
        pageSize: 6, //代表每页显示多少条数据
        areaId:"",
        lpName: ""
      },
      page: {
        pageSizes: [6, 12, 30, 60, 120], //下拉列表中的数组
        total: 0, //一共有多少条数据
      },
    };
  },
  methods: {
    loadMount() {
      this.$axios.post("lights/query",this.query).then((res) => {
        this.items = res.data.data.lightList;
        this.page.total = res.data.data.total;
      });
    },
    loadNew(){
      this.query.areaId="";
      this.query.lpName="";
      this.loadMount();
    },
    loadArea(){
      this.$axios.get("area").then((res) => {
       this.options = res.data.data.areaList;
      });
    },
    handleSizeChange(val) {
        //当每页数据改变时
      this.query.pageSize = val;
      this.loadMount();
      },
      handleCurrentChange(val) {
         //当点击页码时
      this.query.currentPage = val;
      this.loadMount();
      },
  },
  mounted() {
    if(sessionStorage.getItem("item") == null){
      this.loadMount();
      this.loadArea();
    }else{
      this.query.lpName =  JSON.parse(sessionStorage.getItem("item")).lpName;
      this.loadMount();
      this.loadArea();
      sessionStorage.removeItem("item");
    }
  },
};
</script>
<style scoped>
.show{
  height: 350px;
  width: 1000px;
}
.s1 {
  font-size: 10px;
}
.d2 {
  width: auto;
  height: 35px;
}
.dd1 {
  width: 300px;
  height: 33px;
  font-size: 14px;
  float: left;
}
.dd2 {
  width: 300px;
  height: 33px;
  font-size: 14px;
  float: left;
}
.dd3 {
  width: 250px;
  height: 33px;
  font-size: 14px;
  float: right;
}
.el-input {
  width: 100px;
  height: 33px;
}
.d1 {
  float: left;
}
.text {
  font-size: 16px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 300px;
  height: 150px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 100px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

</style>